<template>
    <div class="works-page">
      <div class="workstop">
        <van-icon name="cross" size="24px" @click="$router.go(-1)"/>
        <div class="worksTitle">我发布的菜谱作品</div>
        <div style="width:24px"></div>
      </div>
      <div style="height:40px" v-if="!loading"></div>
      <div class="worksCon" v-if="!loading">
        <router-link tag="div" :to="'/detail?id='+item.id" class="worksItem" v-for="item in workslist" :key="item.id" >
          <div class="worksImg" :style="{'background-image': 'url(blob:http://localhost:8080/'+item.imageid+')',}" v-lazy:background-image="'blob:http://localhost:8080/'+item.imageid+''" ></div>
          <div class="worksInfo">
            <div class="worksname one-txt-cut">{{item.name}}</div>
            <div class="addtime">{{item.id | time}}</div>
            <div class="recommend one-txt-cut">{{item.description}}</div>
            <div class="worksbottom">
              <div class="type">图文菜谱</div>
              <van-icon name="delete-o" size="17px" @click.stop="delworks(item.id)" />
            </div>
          </div>
        </router-link>
      </div>
      <div class="loading">
        <van-loading v-if="loading" size="24px">加载中...</van-loading>
      </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            workslist:null,
            loading:true,
        };
    },

    methods: {
        getWorksFun(){
            let works = JSON.parse(window.localStorage.getItem("works"))
            works = works==null?null:works
            this.workslist = works
            if (this.workslist.length) {
                setTimeout(() => {
                    this.loading = false
                }, 800);
            }
        },
        delworks(id){
            let index = this.workslist.findIndex(item=>item.id==id)
            this.workslist.splice(index,1)
            window.localStorage.setItem("works",JSON.stringify(this.workslist))
        }
    },
    created() {
        this.getWorksFun()
    },
    filters:{
      time(value){
        if (value) {
          let t = new Date(Number(value))
          let y = t.getFullYear()
          let m = t.getMonth()<10?'0'+String(t.getMonth()+1):t.getMonth()+1
          let d = t.getDate()<10?'0'+String(t.getDate()):t.getDate()
          let h = t.getHours()
          let min = t.getMinutes()
          let s = t.getSeconds()
          return `${y}-${m}-${d} ${h}-${min}-${s}`
        }
      }
    }
};
</script>

<style lang="less" scoped>
.works-page{
    width: 100%;
    height: 100%;

    .workstop{
      height: 40px;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background-color: #fff;
      padding: 0 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #ccc;

      .worksTitle{
        font-weight: 700;
        letter-spacing: 0.5px;
      }
    }
    .worksCon{
      padding: 10px 15px;
      box-sizing: border-box;

      .worksItem{
        padding: 10px 0;
        display: flex;

        .worksImg{
          flex:0 0 110px;
          height: 80px;
          border-radius: 6px;
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
          margin-right: 15px;
        }
        .worksInfo{
          width: 220px;
          .worksname{
            font-size: 14px;
            font-weight: 700;
            margin: 5px 0 8px 0;
          }
          .addtime{
            font-size: 12px;
          }
          .recommend{
            font-size: 14px;
            padding: 5px 0;
          }
          .worksbottom{
            display: flex;
            align-items: center;
            justify-content: space-between;
            // margin-top: 10px;
            font-size: 12px;
            color: #666;
          }
        }
      }
    }
    .loading{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>